正文：
在前兩天我們介紹了組件的創造與使用方式，而當我們實際去使用後會發現若我們需要去對組件內容進行更動或客製化需要額外的方式以下的情況是不被允許的

<component-a>
    <span>這段文字無法被渲染出來</span>
</component-a>

因此，我們需要在組件內提供可以編輯的區域，也就是提供一個插槽
componentA

<template>
    <div class="component-a">
        <span class="component-a-text">this is conponent-a</span>
        <slot></slot>
    </div>
</template>

引用它

<component-a>
    <div>export text</div>
</component-a>

結果會呈現
this is component-a
export text

而我們也可以在 slot 中設定預設值
componentA

<template>
    <div class="component-a">
        <span class="component-a-text">this is conponent-a</span>
        <slot>default text</slot>
    </div>
</template>

當我們單純呼叫 componentA

<componentA></componentA>

會得到
this is component-a
default text

我們還可以給予 slot 名稱，將我們需要的內容放到該放的位置上
componentA

<template>
    <div class="component-a">
        <header>
            <slot name="header">
        </header>
        <main>
            <slot></slot>
        </main>
        <footer>
            <slot name="footer"></slot>
        </footer>
    </div>
</template>

引用他

    <component-a>
        <template v-slot:header>
            <div>this is header</div>
        </template>
        <div>this is content</div>
        <template v:slot:footer>
            <div>this is footer</div>
        </template>
    </component-a>

結果為：
this is header
this is content
this is footer
今天內容到此結束~

嘮叨一下：
下雨天時冰箱有食物實在是太棒了